<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>form input动画</title>
    <style>
        input[type='text'],
        input[type='password'] {
            height: 40px;
            width: 200px;
            background: transparent;
            border: none;
            border-bottom: 1px solid #999;
            text-indent: 20px;
            transition: 0.3;
            outline: none;
        }

        input[type='text']:hover,
        input[type='password']:hover {
            border-color: #42b983;
        }

        input[type='text']:focus,
        input[type='password']:focus {
            border-bottom-color: #f1190d;
        }

        input[type='password']::-webkit-input-placeholder,
        input[type='text']::-webkit-input-placeholder {
            transition: 0.5s;
            font-size: 14px;
            transform-origin: top left;
        }

        input[type='password']:focus::-webkit-input-placeholder,
        input[type='text']:focus::-webkit-input-placeholder {
            transform: scale(0.8) translateY(-10px);
        }
    </style>
</head>

<body>
    <input type="text" placeholder="请输入您的姓名" />
    <input type="password" placeholder="请输入您的密码" />
</body>

</html>